<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index2.css" />
    <link rel="stylesheet" href="./css/cart2.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/font/iconfont.css" />
  </head>
  <body>
    <!-- 头部 start-->
    <header id="top">
      <div class="header_top">
        <div class="header_topbar fr">
          <div class="topbar_login">
            <p class="p1">
              <a href="./logon2.html">登录</a>&nbsp;或&nbsp;<a
                href="./regj2.html"
                >注册</a
              >&nbsp;ANTA会员
            </p>
            <p class="p2" style="display: none">
              <a href="javascript:;">欢迎：<span></span></a>
            </p>
          </div>
          <div class="topbar_cart">
            <a href="./cart2.html" class="iconfont icon-gouwuchefill"></a>
          </div>
          <div class="topbar_service">
            <a href="javascript:;" class="iconfont icon-custom-service"></a>
          </div>
          <div class="topbar_en">
            <a href="javascript:;">EN</a>
          </div>
        </div>
      </div>
      <div class="header_bottom">
        <div class="header_logo fl">
          <a href="./index2.html">
            <img src="./img/logo-anta.svg" alt="" width="" />
          </a>
        </div>
        <ul class="header_nav fr">
          <li class="nav_item">
            <a href="./list2.html">冬奥国旗款</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">男子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">运动鞋</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">户外综训鞋</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">外套夹克</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">运动裤</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜子</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">运动项目</a></li>
                  <li><a href="javascript:;">跑步</a></li>
                  <li><a href="javascript:;">篮球</a></li>
                  <li><a href="javascript:;">综训</a></li>
                  <li><a href="javascript:;">生活</a></li>
                  <li><a href="javascript:;">健身</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">女子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">棉鞋</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜类</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">儿童</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">新品上市</a></li>
                  <li><a href="javascript:;">男中大童</a></li>
                  <li><a href="javascript:;">女中大童</a></li>
                  <li><a href="javascript:;">男小童</a></li>
                  <li><a href="javascript:;">女小童</a></li>
                  <li><a href="javascript:;">婴童</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">足球鞋</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服饰</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配饰</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">安踏儿童</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">品牌文化</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">观赏视频</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">联系我们</a>
          </li>
          <li class="nav_item last_li">
            <div class="nav_search">
              <a
                href="javascript:;"
                class="nav_search_btn iconfont icon-xiangshang"
              ></a>
              <input type="text" class="nav_search_ipt" placeholder="搜索" />
            </div>
          </li>
        </ul>
      </div>
    </header>
    <!-- 头部 end-->
    <!-- main -->
    <main>
      <div class="cart_main">
        <h3 class="cart_title">
          <span>
            <i></i>
            我的购物车
          </span>
        </h3>
        <div class="cart_top">
          <label>
            <input type="checkbox" class="checkbox_ipt" id="all" />
            <span>全选</span>
          </label>
        </div>
        <table class="cart_table" id="cart_table">
          <!--！！！！！！！！！！！！！！！！！！！！！！ -->
          <tr class="goods_item">
            <td class="td_check">
              <input type="checkbox" class="checkbox_ipt" />
            </td>
            <td class="td_img">
              <img src="../imgs/goods.jpg" alt="" />
            </td>
            <td class="td_infos">
              <div class="td_infos_top">
                <div class="fl">
                  <h5>男针织运动长裤</h5>
                  <p><span>颜色:基础黑;尺码:M</span></p>
                </div>
                <div class="fr">
                  <span class="infos_price">￥499.00</span>
                </div>
              </div>
              <div class="td_infos_bot">
                <p class="fl">
                  <span style="margin-right: 14px">数量:</span>
                  <a href="javascript:;" class="num_minus">-</a>
                  <input type="text" class="num_ipt" value="1" />
                  <a href="javascript:;" class="num_add">+</a>
                </p>
                <p class="fr">
                  <a href="javascript:;" class="del">删除</a>
                </p>
              </div>
            </td>
          </tr>
          <!-- ！！！！！！！！！！！！！！！！！！！！ -->
        </table>
      </div>
      <div class="cart_foot">
        <div class="sum_main">
          <div class="sum_infos fl">
            <div class="sum_operation fl">
              <input type="checkbox" class="checkbox_ipt" id="all1" />
              <span style="font-size: 12px">全选商品</span>
              <a href="javascript:;" class="del_choose">删除商品</a>
            </div>
            <div class="sum_totalPrice fr">
              <span style="font-size: 12px">总价</span>
              <span class="price" id="money">￥0.00</span>
            </div>
          </div>
          <div class="sum_settlement fl">
            <a href="javascript:;" class="btn_settlement">结算</a>
          </div>
        </div>
      </div>
    </main>
    <!-- main结束 -->
    <!-- 脚部 start -->
    <footer>
      <div class="footer_inner">
        <div class="footer_left fl">
          <img src="./img/footer-anta.svg" alt="" />
        </div>
        <div class="footer_right fr">
          <ul class="links_line">
            <li style="border-left: 0">
              <a href="javascript:;">安踏海外</a>
            </li>
            <li>
              <a href="javascript:;">安踏投资者关系</a>
            </li>
          </ul>
          <div class="footer_copyright">
            <div style="margin-bottom: 6px">
              <span>Copyright(C) 2020 by www.ANTA.com</span>
              <span>©安踏体育用品有限公司版权所有</span>
              <a href="javascript:;">营业执照</a>
              <a href="javascript:;">开户许可证</a>
            </div>
            <div>
              <a href="javascript:;">闽ICP备11020421号-1</a>
              <a href="javascript:;">闽公网安备35058202000423号</a>
            </div>
          </div>
          <ul class="links_line">
            <li style="border-left: 0"><a href="javascript:;">安踏儿童</a></li>
            <li><a href="javascript:;">Fila</a></li>
            <li><a href="javascript:;">Kolon Sport</a></li>
            <li><a href="javascript:;">Descente</a></li>
            <li><a href="javascript:;">Sprandi</a></li>
            <li><a href="javascript:;">Kingkow</a></li>
          </ul>
        </div>
      </div>
    </footer>
    <!-- 脚部 end -->
    <!-- 侧边栏 start -->
    <div class="sidebar">
      <a href="javascript:;" class="goto_top"></a>
      <a href="javascript:;" class="goto_cart"></a>
      <a href="javascript:;" class="goto_kefu"></a>
    </div>
    <!-- 侧边栏 end -->
  </body>
</html>
<script src="./node_modules/_jquery@3.6.0@jquery/dist/jquery.min.js"></script>
<script src="./js/anta.js"></script>

<script>
  // 二级菜单
  $(".nav_item")
    .mouseover(function () {
      $(this).find(".menu_two").show();
    })
    .mouseout(function () {
      $(this).find(".menu_two").hide();
    });

  $(function () {
    // 显示购物车
    getShoppingCart();
  });
//   获取该用户加入购物车的商品
  function getShoppingCart() {
    $.get(
      "./goodsAndShoppingCart/getShoppingCart.php",
      {
        vipName: getCookie("username"),
      },
      function (data) {
        // console.log(data);
        let htmlStr = "";
        data.forEach((goods) => {
          htmlStr += `
                            <tr class="goods_item">
                                <td class="td_check">
                                    <input type="checkbox" class="checkbox_ipts" name="permission">
                                </td>
                                <td class="td_img">
                                    <img src="${goods.goodsImg}" alt="">
                                </td>
                                <td class="td_infos">
                                    <div class="td_infos_top">
                                        <div class="fl">
                                            <h5>${goods.goodsName}</h5>
                                            <p><span>颜色:基础黑;尺码:M</span></p>
                                        </div>
                                        <div class="fr">
                                            <span class="infos_price">￥${goods.goodsPrice}.00</span>
                                        </div>
                                    </div>
                                    <div class="td_infos_bot">
                                        <p class="fl">
                                            <span style="margin-right: 14px;">数量:</span>
                                            <button class="num_minus" onclick="reduceCount(this,'${goods.goodsId}')">-</button>
                                            <input type="text" class="num_ipt" value="${goods.goodsCount}">
                                            <button class="num_add" onclick="addcount(this,'${goods.goodsId}')">+</button>
                                        </p>
                                        <p class="fr">
                                            <a href="javascript:;" class="num_del" onclick="deleteGoods(this,'${goods.goodsId}')">删除</a>
                                        </p>
                                    </div>
                                </td>
                            </tr> `;
        });
        if (data.length > 0) {
          $("#cart_table").html(htmlStr);
        } else {
          $("#cart_table").html('<a href="./list.html">请添加商品...</a>').css({
            "text-align": "center",
            "line-height": "200px",
            "font-size": "20px",
            "font-weight": "500",
          });
        }
      },
      "json"
    );
  }

  //改变商品数量
  //按钮减的功能
  function reduceCount(btn, goodsId) {
    let num = parseInt($(btn).next().val());
    num--;
    if (num <= 1) {
      num = 1;
    }
    // 减少
    $.get(
      "./goodsAndShoppingCart/updateGoodsCount.php",
      {
        vipName: getCookie("username"),
        goodsId: goodsId,
        goodsCount: num,
      },
      function (data) {
        if (data == "1") {
          $(btn).next().val(num);
        } else if (data == "0") {
          alert("错误！");
        }
      }
    );
  }
  //按钮加的功能
  function addcount(btn, goodsId) {
    let num = parseInt($(btn).prev().val());
    num++;
    $.get(
      "./goodsAndShoppingCart/updateGoodsCount.php",
      {
        vipName: getCookie("username"),
        goodsId: goodsId,
        goodsCount: num,
      },
      function (data) {
        if (data == "1") {
          $(btn).prev().val(num);
        } else if (data == "0") {
          alert("错误！");
        }
      }
    );
  }

  //按钮删除的功能
  function deleteGoods(btn, goodsId) {
    if (confirm("亲，您真的要删除吗？") == false) {
      return;
    }
    $.get(
      "./goodsAndShoppingCart/deleteGoods.php",
      {
        vipName: getCookie("username"),
        goodsId: goodsId,
      },
      function (data) {
        if (data == "1") {
          // 后端删除成功，再删除前端
          btn.parentNode.parentNode.parentNode.parentNode.remove();
        }
      }
    );
  }
//   总价
  $("#all").on("click", function () {
    $(".checkbox_ipts").prop("checked", $(this).prop("checked"));
    $("#all1").prop("checked", $(this).prop("checked"));
    $.get(
      "./goodsAndShoppingCart/getShoppingCart.php",
      {
        vipName: getCookie("username"),
      },
      function (data) {
        console.log(data);
        let money = 0;
        data.forEach((goods) => {
          let price = parseInt(goods.goodsCount * goods.goodsPrice);
          console.log(price);
          money += price;
        });
        if ($("#all").is(":checked")) {
          $("#money").html("￥" + money + ".00");
        } else {
          $("#money").html("￥0.00");
        }
      },
      "json"
    );
  });
  $(".cart_table").on("click", ".checkbox_ipts", function () {
    $(this).toggleClass("active");
    if ($(".active").length == $("#all").length) {
      $("#all").prop("checked", false);
    } else {
      $("#all").prop("checked", true);
    }
  });
// 总价
  $("#all1").on("click", function () {
    $(".checkbox_ipts").prop("checked", $(this).prop("checked"));
    $("#all").prop("checked", $(this).prop("checked"));
    $.get(
      "./goodsAndShoppingCart/getShoppingCart.php",
      {
        vipName: getCookie("username"),
      },
      function (data) {
        console.log(data);
        let money = 0;
        data.forEach((goods) => {
          let price = parseInt(goods.goodsCount * goods.goodsPrice);
          console.log(price);
          money += price;
        });
        if ($("#all").is(":checked")) {
          $("#money").html("￥" + money + ".00");
        } else {
          $("#money").html("￥0.00");
        }
      },
      "json"
    );
  });
  $(".cart_table").on("click", ".checkbox_ipts", function () {
    $(this).toggleClass("active");
    if ($(".active").length == $("#all1").length) {
      $("#all1").prop("checked", false);
    } else {
      $("#all1").prop("checked", true);
    }
  });
</script>
